<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button [text]="''" defaultHref="/tabs/messages"></ion-back-button>
    </ion-buttons>
    <ion-item lines="none" *ngIf="user">
      <ion-avatar slot="start">
        <img [src]="user.image">
      </ion-avatar>
      <ion-label class="ion-no-margin">
        {{user.first_name}} {{user.last_name}}
        <p class="ion-no-margin">
          two minutes ago
        </p>
      </ion-label>
    </ion-item>
  </ion-toolbar>
</ion-header>

<ion-content [scrollY]="isAllowScroll" [scrollEvents]="true" (ionScrollStart)="logScrollStart()"
  (ionScroll)="logScrolling($event)" (ionScrollEnd)="logScrollEnd()">
  <ion-item-group class="messages-item-group" *ngFor="let chat of chats">

    <!-- Date message divider -->
    <ion-item-divider sticky class="message-divider" [ngClass]="{'scrolling': pageScrolling}">
      <ion-label>
        {{chat.date}}
      </ion-label>
    </ion-item-divider>

    <ion-item-sliding class="message-item-sliding"
      *ngFor="let message of chat.chats; let index = index; let last = last" #slidingItem
      (ionDrag)="messageDraged($event, slidingItem)">

      <!-- User message -->
      <ng-container *ngIf="message.type === 'user'">
        <ion-item lines="none" class="message-user">
          <ion-avatar slot="start" class="ion-align-self-end user-avatar"
            *ngIf="chat.chats[index + 1]?.type === 'me' || last">
            <img [src]="message.avatar">
          </ion-avatar>
          <div class="message-container"
            [ngClass]="{'user-msg-padding': chat.chats[index + 1]?.type !== 'me' && !last}">
            <span class="text" [innerHTML]="message.message"></span>
            <small class="time">12:45</small>
          </div>
        </ion-item>
      </ng-container>

      <!-- My message -->
      <ng-container *ngIf="message.type === 'me'">
        <ion-item lines="none" class="message-me">
          <div class="message-container" slot="end">
            <span class="text" [innerHTML]="message.message"></span>
            <small class="time">12:45</small>
          </div>
        </ion-item>
      </ng-container>

      <!-- Reply slide -->
      <ion-item-options side="end" class="no-border">
        <ion-item-option disabled style="--background: var(--ion-item-background);">
          <ion-icon slot="icon-only" name="arrow-undo-outline" color="primary"></ion-icon>
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-item-group>
</ion-content>

<ion-footer class="ion-no-border">
  <ion-toolbar style="height: auto;">
    <ion-buttons slot="start">
      <ion-button>
        <ion-icon slot="icon-only" name="add-circle-outline" color="primary"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-textarea autoGrow rows="1" [placeholder]="'messages_title' | translate" [formControl]="messageControl"
      class="message-textarea"></ion-textarea>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon slot="icon-only" name="happy-outline" color="primary"></ion-icon>
      </ion-button>
      <ion-button (mousedown)="sendMessage($event)" *ngIf="messageControl.valid">
        <ion-icon slot="icon-only" name="send-outline" color="primary"></ion-icon>
      </ion-button>
      <ion-button *ngIf="!messageControl.valid">
        <ion-icon slot="icon-only" name="mic-outline" color="primary"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>